<template>
  <view class="page-container">
    <button type="button" @click="imageDistinguish" class="btn-up">点击上传图片</button>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  methods: {
    imageDistinguish() {
      uni.chooseImage({
        sourceType: ['camera'],
        count: 1,
        success: (res) => {
          console.log(res)
          const form = new FormData();
          form.append("file", res.tempFiles as any);
          uni.showLoading({
            title: "正在识别"
          });
          uni.uploadFile({
            url: this.$config.MAIN_BASE_API + "/image/distinguish",
            filePath: (res.tempFilePaths as any)[0],
            name: 'file',
            success: (uploadFileRes) => {
              uni.hideLoading();
              console.log(uploadFileRes);
              let dosc = "";
              JSON.parse(uploadFileRes.data).data.forEach((rs: any) => {
                dosc += rs.name + " (可能性:"+ (rs.probability * 100).toFixed(2) + "%)" + "\n\r";
              });
              uni.showModal({
                title: "识别结果",
                content: dosc,
                showCancel: false
              })
            },
            fail: (e) => {
              console.log(e);
            }
          });
        }
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image:url(~@/static/other_slices/bg_flower.jpg);
}
.btn-up{
  position: absolute;
  bottom: 30px;
  background: #007aff;
  color: #fff;
}
</style>
